//广告设置

import React, { useEffect, useState } from 'react';
import { Button, Tag } from 'antd';
import { get_guanggao_list, delete_guanggao_list } from '../../utils/api';
import Toptitle from '../../Compon/Toptitle';
import Tbale from '../ContentManagement/content_components/Tbale';
import UploadFile from '../../Compon/UploadFile';
import Gooutfile from '../../Compon/file/Gooutfile.jsx';
import moment from 'moment';

export default function Advertisement() {
  const [data, setData] = React.useState([]);
  useEffect(() => {
    get_guanggao();
  }, []);
  const get_guanggao = async () => {
    // const res = await get_guanggao_list();
    // console.log(res);
    // setData(res.data.data);
    const workerurl = new URL('../../webworker/worker.ts', import.meta.url);
    const worker = new Worker(workerurl, { type: 'module' });

    worker.postMessage('11');
    worker.onmessage = (e) => {
      console.log(e.data, 'worker');
      setData(e.data.data);
    };   
  };
  const columns = [
    {
      title: '序号',
      dataIndex: '_id',
      key: '_id',
      render: (text, record, index) => index + 1,
    },
    {
      title: 'ID',
      dataIndex: '_id',
      key: '_id_',
    },
    {
      title: '广告名称',
      dataIndex: 'guanggao_name',
      key: 'guanggao_name',
    },
    {
      title: '广告图片',
      dataIndex: 'guanggao_url',
      key: 'guanggao_url',
      render: (text, record) => (
        <img src={record.guanggao_url} alt="" style={{ width: '0.5rem' }} />
      ),
    },
    {
      title: '页面',
      dataIndex: 'guanggao_yemian',
      key: 'guanggao_yemian',
    },
    {
      title: '排序值',
      dataIndex: 'guanggao_paixuzhi',
      key: 'guanggao_paixuzhi',
      sorter: (a, b) => a.guanggao_paixuzhi - b.guanggao_paixuzhi, //排序
    },
    {
      title: '状态',
      dataIndex: 'guanggao_state',
      key: 'guanggao_state',
      render: (text, record) => (
        <div>
          <Tag color={record.guanggao_state === 1 ? 'green' : 'red'}>
            {record.guanggao_state === 1 ? '启用' : '禁用'}
          </Tag>
        </div>
      ),
      filters: [
        {
          text: '启用',
          value: 1,
        },
        {
          text: '禁用',
          value: 0,
        },
      ],
      filterMultiple: true,
      onFilter: (value, record) => record.guanggao_state === value,
    },
    {
      title: '创建时间',
      dataIndex: 'guanggao_start_time',
      key: 'guanggao_start_time',
      render: (text, record) =>
        moment(record.guanggao_start_time).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '有效时间',
      dataIndex: 'guanggao_end_time',
      key: 'guanggao_end_time',
      render: (text, record) =>
        moment(record.guanggao_end_time).format('YYYY-MM-DD HH:mm:ss'),
    },

    {
      title: '操作',
      dataIndex: '_id',
      key: '_id',
      render: (text, record) => (
        <Button
          type="primary"
          danger
          onClick={async () => {
            console.log(record._id);
            await delete_guanggao_list({ text: record._id });
            get_guanggao();
          }}
        >
          删除
        </Button>
      ),
    },
  ];

  return (
    <div style={{ marginTop: '0.3rem' }}>
      <Toptitle title="广告设置"></Toptitle>
      <Tbale data={data} colums={columns}></Tbale>
      <div style={{ display: 'flex' }}>
        <UploadFile
          name={'导入'}
          // url="http://localhost:3000/CustomerService/index/uploadFile"
        ></UploadFile>

        <Gooutfile data={data}></Gooutfile>
      </div>
    </div>
  );
}
